<template>
  <div class="bg-color-black center-container">
    <div class="slogan">先安全 后生产 不安全 不生产</div>
    <div class="dateSlogan colorGrass">已安全生产{{ daysSince }}天</div>
    <div class="com-page">
      <!-- <safetyChart /> -->
      <safetyNumberChart />
    </div>
  </div>
</template>

<script>
// import safetyChart from '@/components/echart/safetyChart'
import safetyNumberChart from '@/components/echart/safetyNumberChart'
export default {
  data() {
    return {
      startDate: new Date('2020-01-01'), // 设置开始日期为2020年1月1日
      daysSince: 0 // 存储天数
    }
  },
  components: {
    // safetyChart,
    safetyNumberChart
  },
  mounted() {
    // 组件加载完成时计算天数
    this.calculateDays()
  },
  methods: {
    calculateDays() {
      const currentDate = new Date() // 获取当前日期
      const timeDifference = currentDate - this.startDate // 计算时间差（毫秒）
      const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24)) // 转换为天数
      this.daysSince = daysDifference // 设置daysSince为计算出的天数
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/index.scss';
.center-container {
  display: grid;
  grid-template-rows: 1fr 1.2fr 6fr;
  grid-gap: 10px;
  place-items: center;
}
.slogan {
  padding-top: 1rem;
  font-size: 1.3rem;
  letter-spacing: 0.5rem;
}
.dateSlogan {
  font-size: 2rem;
}
// .com-page {
//   display: grid;
//   grid-template-columns: 1fr 1fr;
// }
</style>
